<template>
  <view class="exchange-header" :style="titleTopBgStyle">
    <view class="user-wrap">
      <image :lazy-load="true" class="avatar" :src="info.avatar" />
      <view class="user-info">
        <view class="user-info-name">
          {{ info.name }}
        </view>
        <view class="user-info-flower">
          <image :src="FLOWER" />
          <view>{{ info.flower_num | formatNumber }}花朵</view>
        </view>
      </view>
    </view>
    <view class="user-button">
      <finishButton
        :width="244"
        :background-bg="smallButtonBg"
        @click="handleToExchangeRecord"
      >
        兑换记录
      </finishButton>
      <finishButton
        :width="244"
        :background-bg="red_btn"
        @click="handleToMinePetal"
      >
        合成花朵
      </finishButton>
    </view>
  </view>
</template>
<script>
import Taro from "@tarojs/taro";
import finishButton from "@/components/finish-button/index";
import { smallButtonBg, red_btn } from "@/libs/image-url";
import { TOP_BG, FLOWER } from "../image-url";
import { hasBackgroundBgTitleStyle } from "@/libs/util";
export default {
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    finishButton
  },
  data() {
    return {
      smallButtonBg,
      FLOWER,
      red_btn
    };
  },
  computed: {
    titleTopBgStyle() {
      return hasBackgroundBgTitleStyle(TOP_BG, 34, 284);
    }
  },
  methods: {
    handleToExchangeRecord() {
      Taro.navigateTo({
        url: "/pages/exchange-store/exchange-record/index"
      });
    },
    handleToMinePetal() {
      Taro.navigateTo({
        url: "/pages/mine/petal/index"
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
.exchange-header {
  width: 100%;
  padding: 0 30px 0;
  .user-button {
    display: flex;
    .finish-button {
      &-wrap {
        &:first-child {
          margin-right: 32px;
        }
      }
      width: 244px;
      @include base-text(64px, 28px, #ffffff, 400);
      line-height: 64px;
    }
  }
  .user-wrap {
    @include normal-flex;
    height: 110px;
    margin-bottom: 48px;
    .avatar {
      width: 108px;
      height: 108px;
      margin-right: 32px;
      border-radius: 50%;
    }
    .user-info {
      flex: 1;
      &-name {
        @include textEllipsis;
        width: 100%;
        margin-bottom: 12px;
        @include base-text(50px, 36px, #303133);
      }
      &-flower {
        @include normal-flex(flex-start);
        image {
          width: 44px;
          height: 44px;
          margin-right: 8px;
        }
        view {
          @include base-text(40px, 28px, #303133, 400);
        }
      }
    }
  }
}
</style>
